<template>
	<view class="wallet">
		<view class="wallet1">
			我的余额
		</view>
		<view class="wallet2">
			<view class="yuan1">
				可用余额
			</view>
			<view class="yuan2">
				<span class="pans">￥{{user.balance}}</span>
			</view>
			<!-- <view class="money">
				<span class="money1">提现</span>
				<span class="money2">余额明细</span>
			</view> -->
		</view>
		<view class="voucher">
			<radio-group class="block" @change="RadioChange" style="background-color:white;">
				<view style="display: flex;justify-content: space-between;">
					<view class="cu-form-group">
						<view class="title">￥50</view>
						<radio class='radio' :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false"
							value="A"></radio>
					</view>
					<view class="cu-form-group">
						<view class="title">￥100</view>
						<radio class='radio' :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false"
							value="B"></radio>
					</view>
					<view class="cu-form-group">
						<view class="title">￥500</view>
						<radio class='radio' :class="radio=='C'?'checked':''" :checked="radio=='C'?true:false"
							value="C"></radio>
					</view>
					
				</view>
			</radio-group>
			
			<view class="cu-form-group">
				<input type="text" placeholder="输入金额自定义充值" v-model="jine" />
			</view>
			
			<!-- 充值说明 -->
			<view class="explain">
				<p>充值说明：</p>
				<p>1.充值金额只能在本平台内使用，不能用于其他平台</p>
				<p>2.充值金额无使用期限。但充值后无法退款，不可提现</p>
			</view>
			
			<button class="btn" @click="cz">
				确认充值
			</button>

			<view style="height: 40rpx;"></view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				jine: '',
				pay: '',
				user: {
					'ss': 1
				},
				radio: 'D'
			}
		},
		onLoad() {
			this.token = uni.getStorageSync("token")
			if (this.token == '') {
				uni.showToast({
					title: '请先登录',
					icon: "error"
				});
				uni.navigateTo({
					url: '../login/login'
				});

			}
			var that = this
			uni.request({
				method: "POST",
				url: "http://127.0.0.1:9000/user/findOneUser",
				header: {
					Authorization: this.token
				},
				success(res) {
					that.user = res.data.data.user
					console.log(res.data.data.user);
				}
			})
		},

		methods: {
			cz() {
				var that = this
				if(that.jine != ''){
					uni.request({
						url: 'http://127.0.0.1:9000/user/topup?topup=' + that.jine,
						method: 'POST',
						header: {
							"Authorization": that.token
						},
						data: {
					
						}
					}).then(
						(res) => {
							uni.showToast({
								title: '充值成功',
								icon:'success'
							});
							uni.reLaunch({
							    url: '/pages/wallet/wallet'
							})
						}
					)
				}else{
					if(that.radio == 'A'){
						uni.request({
							url: 'http://127.0.0.1:9000/user/topup?topup=' + '50',
							method: 'POST',
							header: {
								"Authorization": that.token
							},
							data: {
						
							}
						}).then(
							(res) => {
								uni.showToast({
									title: '充值成功',
									icon:'success'
								});
								uni.reLaunch({
								    url: '/pages/wallet/wallet'
								})
							}
						)
					}else if(that.radio == 'B'){
						uni.request({
							url: 'http://127.0.0.1:9000/user/topup?topup=' + '100',
							method: 'POST',
							header: {
								"Authorization": that.token
							},
							data: {
						
							}
						}).then(
							(res) => {
								uni.showToast({
									title: '充值成功',
									icon:'success'
								});
								uni.reLaunch({
								    url: '/pages/wallet/wallet'
								})
							}
						)
					}else if(that.radio == 'C'){
						uni.request({
							url: 'http://127.0.0.1:9000/user/topup?topup=' + '500',
							method: 'POST',
							header: {
								"Authorization": that.token
							},
							data: {
						
							}
						}).then(
							(res) => {
								uni.showToast({
									title: '充值成功',
									icon:'success'
								});
								uni.reLaunch({
								    url: '/pages/wallet/wallet'
								})
							}
						)
					}else{
						uni.showToast({
							title: '请选择或输入金额',
							icon:'error'
						});
					}
				}
				
				
				
				
			},
			RadioChange(e) {
				this.radio = e.detail.value
				console.log(e.detail.value);
			},

		}
	}
</script>

<style lang="less">
	.wallet {
		width: 100%;
		height: 350rpx;
		background-color: #157DF7;
		z-index: -999;

		.wallet1 {
			text-align: center;
			font-size: 18px;
			color: white;
			padding: 40rpx 0;
		}

		.wallet2 {
			background-image: url(https://s1.ax1x.com/2022/11/18/zu9MCQ.png);
			background-size: cover;
			width: 90%;
			height: 300rpx;
			overflow: hidden;
			position: absolute;
			top: 100rpx;
			left: 40rpx;
			border-radius: 30rpx;
			color: white;

			.yuan1 {
				font-size: 13px;
				font-weight: 100;
				position: absolute;
				top: 80rpx;
				left: 40rpx;
			}

			.yuan2 {
				.texts {
					position: absolute;
					top: 155rpx;
					left: 40rpx;
				}

				.pans {
					font-size: 24px;
					font-weight: bold;
					position: absolute;
					top: 140rpx;
					left: 70rpx;
				}
			}

			// .money{
			// 	position: absolute;
			// 	top: 210rpx;
			// 	right: 10%;
			// 	font-size:13px;
			// 	font-weight: 100;	
			// 	display: flex;
			// 	.money1{
			// 		display: block;
			// 		width: 80rpx;
			// 		height: 31rpx;
			// 		text-align: center;
			// 		line-height: 30rpx;
			// 		border-right: 1px solid white;
			// 	}
			// 	.money2{
			// 		display: block;
			// 		width: 120rpx;
			// 		height: 31rpx;
			// 		text-align: center;
			// 		line-height: 30rpx;
			// 		padding-left: 20rpx;


			// 	}
			// }
		}

		.voucher {
			height: 300rpx;
			padding-top: 280rpx;
			width: 90%;
			margin: 40rpx;

			.voucher1 {
				height: 40rpx;
				padding-top: 40rpx;
				display: flex;

				.voucher2 {
					height: 30rpx;
					width: 10rpx;
					background-color: #127FFF;
					position: relative;
					top: 6rpx;
					border-radius: 90rpx;
				}

				.rech {
					padding-left: 14rpx;
					font-weight: bold;
				}


			}

			.much {
				padding-top: 40rpx;
				height: 230rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.much1 {
					width: 30%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					background-color: #F8F8F8;
					border-radius: 30rpx;
					color: #6E6E6E;

					.much2 {
						font-size: 20px;

					}
				}

				.active {
					width: 30%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					background-color: #157DF7;
					border-radius: 30rpx;
					color: #6E6E6E;

					.much2 {
						font-size: 20px;

					}
				}
			}

			.ipt {
				height: 100rpx;
				line-height: 100rpx;
				background-color: #F8F8F8;
				border-radius: 30rpx;
				color: #6E6E6E;
			}

			.pay {
				padding-top: 40rpx;
				height: 50rpx;
				line-height: 50rpx;
				display: flex;

				.wx {
					padding-left: 20rpx;
				}

				.radio-group {
					position: absolute;
					right: 50rpx;

				}
			}

			.explain {
				margin-top: 40rpx;
				line-height: 50rpx;
				background-color: #F8F8F8;
				font-size: 15px;
				color: #6E6E6E;
			}

			.btn {
				margin: 110rpx 0;
				background-color: #127FFF;
				font-size: 18px;
				color: white
			}

		}
	}
</style>
